<template>
  <div class="page-container">
    <div class="common-content-wrap">
      <TrTable
        ref="trTable"
        isNeedSelection
        :btnList="btnList"
        :total="totalNum"
        v-model="searchParams"
        :searchShowList="searchShowList"
        :searchHideList="searchHideList"
        :tableColumn="tableColumn"
        requestName="searchHandle"
        :tableData="tableData"
        @add="addHandle"
        @editRow="editRowHandle"
        @view="viewHandle"
        @enable="enableHandle"
        @unEnable="unEnableHandle"
        @export="exportHandle"
        @enableRow="enableRowHandle"
        @unEnableRow="unEnableRowHandle"
      />
    </div>

    <TrEditPopup
      :width="460"
      v-model="isShowEdit"
      :title="checkTitle"
      :valueObj.sync="form"
      :formData="formData"
      :list="popupList"
      @close="addEditClose"
      @confrim="addEditHandle"
    />

    <TrDetail
      v-model="isShowDetail"
      :leftList="detailList"
      statusModel="hidden"
      :detailData="detailData"
      :isNeedFooter="false"
      @close="isShowDetail = false"
    />
  </div>
</template>

<script>
import {
  getList,
  save,
  update,
  updateState,
} from "@/api/baseCode/processMaintenance";
import { findByProperty } from "@/utils/util";
import { getColor } from "@/utils/billColor";
import enumData from "@/utils/enumCode.js";
import TrTable from "@/components/Tr-table/Tr-table.vue";
import TrEditPopup from "@/components/Tr-edit/Tr-edit-popup.vue";
import TrDetail from "@/components/Tr-detail/Tr-detail.vue";

export default {
  components: {
    TrTable,
    TrEditPopup,
    TrDetail,
  },
  name: "ProcessMaintenanceBox",
  data: () => ({
    tableColumn: [
      {
        type: "text",
        label: "工序编码",
        value: "processCode",
      },
      {
        type: "text",
        label: "工序名称",
        value: "processName",
      },
      {
        type: "text",
        label: "工序描述",
        value: "remark",
      },
      {
        type: "text",
        label: "状态",
        value: "isEnabledName",
      },
      {
        type: "text",
        label: "创建人员",
        value: "createUserName",
      },
      {
        type: "text",
        label: "创建时间",
        value: "createTime",
      },
      {
        type: "text",
        label: "修改人员",
        value: "updateUserName",
      },
      {
        type: "text",
        label: "修改时间",
        value: "updateTime",
      },
      {
        type: "option",
        label: "操作",
        fixed: "right",
        width: 120,
        showBtnList: [
          {
            label: "查看",
            option: "view",
          },
        ],
        hideBtnList: [
          {
            label: "启用",
            option: "enableRow",
          },
          {
            label: "停用",
            option: "unEnableRow",
          },
          {
            label: "编辑",
            option: "editRow",
          },
        ],
      },
    ],
    searchHideList: [
      {
        startStr: "createTimeStart",
        endStr: "createTimeEnd",
        id: "createdTime",
        type: "daterange",
        width: 80,
        label: "创建时间",
        value: [],
        timePeriod: true,
        radio: 1,
      },
      {
        startStr: "updateTimeStart",
        endStr: "updateTimeEnd",
        id: "updateTime",
        type: "daterange",
        width: 80,
        label: "修改时间",
        value: [],
        timePeriod: true,
        radio: -1,
      },
    ],
    searchShowList: [
      {
        id: "processCode",
        type: "input",
        width: 33.33,
        label: "工序编码",
        value: "",
      },
      {
        id: "processName",
        type: "input",
        width: 33.33,
        label: "工序名称",
        value: "",
      },
      {
        id: "isEnabledList",
        label: "状态",
        type: "multiSelect",
        isNeed: false,
        width: 33,
        value: [],
        list: [],
      },
    ],
    btnList: [
      {
        label: "新增",
        option: "add",
        color: "blue",
      },
      {
        label: "启用",
        option: "enable",
        color: "white",
        isRelaTable: true,
      },
      {
        label: "停用",
        option: "unEnable",
        color: "white",
        isRelaTable: true,
      },
      // {
      //   label: "导出",
      //   option: "export",
      //   color: "white",
      // },
    ],
    tableData: [],
    searchParams: {
      current: 1,
      size: 10,
    },
    totalNum: 0,

    detailData: {},
    isShowDetail: false,
    detailList: [
      {
        type: "text",
        label: "基础信息",
        list: [
          {
            text: "工序名称",
            id: "processName",
            width: 50,
          },
          {
            text: "工序编码",
            id: "processCode",
            width: 50,
          },
          {
            text: "工序状态",
            id: "isEnabledName",
            width: 50,
          },
          {
            text: "工序描述",
            id: "remark",
            width: 100,
          },
        ],
      },
    ],
    form: {},
    formData: {},
    popupList: [
      {
        id: "processCode",
        label: "工序编码",
        type: "input",
        width: 100,
        value: "",
        disabled: false,
      },
      {
        id: "processName",
        label: "工序名称",
        type: "input",
        width: 100,
        value: "",
      },
      {
        id: "isEnabled",
        label: "是否启用",
        type: "radio",
        width: 100,
        value: 1,
        list: [],
        isNeed: false,
      },
      {
        id: "remark",
        isNeed: false,
        label: "工序描述",
        type: "textarea",
        maxlength: 100,
        width: 100,
        value: "",
      },
    ],
    isShowEdit: false,
    currentType: "add",
    currentRow: {},
  }),
  computed: {
    checkTitle() {
      const titles = {
        add: "新增",
        edit: "编辑",
      };
      return titles[this.currentType];
    },
    ids() {
      return this.$refs.trTable.selectionList.map((row) => row.id);
    },
  },
  mounted() {
    // this.getListHandle();
    this.getEnmuData();
    // validateData
  },
  methods: {
    exportHandle() {
      this.$exportHandle({ vm: this, params: this.searchParams });
    },
    addEditClose() {
      const processCodeObj = this.$findByProperty(
        this.popupList,
        "id",
        "processCode"
      );
      processCodeObj.disabled = false;
      this.formData = {};
      this.form = {};
      this.isShowEdit = false;
    },
    async addEditHandle() {
      await this.$textShow({
        title: this.$t("tip.label"),
        content: [`是否确认${this.checkTitle}?`],
      });
      if (this.currentType == "add") {
        await save(this.form);
      } else {
        this.form.id = this.formData.id;
        await update(this.form);
      }
      await this.getListHandle();
      this.addEditClose();
      this.$message.success(this.$t("msg.success"));
      this.clearSelect();
    },
    addHandle() {
      this.currentType = "add";
      this.isShowEdit = true;
    },
    editRowHandle(row) {
      this.currentType = "edit";
      const processCodeObj = this.$findByProperty(
        this.popupList,
        "id",
        "processCode"
      );
      processCodeObj.disabled = true;
      this.$validateData(row, 3);
      this.formData = row;
      this.isShowEdit = true;
    },
    async viewHandle(row) {
      this.$validateData(row);
      const findObj = this.$findByProperty(
        this.detailList,
        "id",
        "isEnabledName",
        "list"
      );
      findObj.valueColor = getColor("QT", row.isEnabled);
      this.detailData = row;
      this.isShowDetail = true;
    },
    enableHandle() {
      this.updateStateAxios(this.ids, 1);
    },
    unEnableHandle() {
      this.updateStateAxios(this.ids, 0);
    },
    enableRowHandle(row) {
      this.updateStateAxios([row.id], 1);
    },
    unEnableRowHandle(row) {
      this.updateStateAxios([row.id], 0);
    },
    async updateStateAxios(ids, isEnabled) {
      const text = isEnabled === 1 ? "启用" : "停用";
      await this.$textShow({
        title: this.$t("tip.label"),
        content: [`是否${text}该工序?`],
      });
      await updateState({ ids, isEnabled });
      await this.getListHandle();
      this.$message.success(this.$t("msg.success"));
      this.clearSelect();
    },
    async getEnmuData() {
      const res = await this.$fetchEnumData([enumData.isEnabledList]);

      let isEnabledListObj = findByProperty(
        this.searchShowList,
        "id",
        "isEnabledList"
      );
      let isEnabledObj = findByProperty(this.popupList, "id", "isEnabled");

      isEnabledListObj && (isEnabledListObj.list = res[enumData.isEnabledList]);
      isEnabledObj && (isEnabledObj.list = res[enumData.isEnabledList]);
    },
    searchHandle() {
      this.getListHandle();
    },
    async getListHandle() {
      const { data } = await getList(this.searchParams);
      if (data.code != 200) return;
      this.$validateData(data.data);
      this.tableData = data.data.records;
      this.tableData.forEach((item) => {
        item["isEnabledNameColor"] = getColor("QT", item.isEnabled);
      });
      this.totalNum = Number(data.data.total);
    },
    clearSelect() {
      this.$refs.trTable.clearSelect();
    },
  },
};
</script>
